Skip to content

Comments

Move all scss @import to @use/@forward#1697

Merged
sachinchoolur merged 1 commit intosachinchoolur:scss-usefrom
joeworkman-forks:master
Jun 15, 2025
Merged

Move all scss @import to @use/@forward#1697
sachinchoolur merged 1 commit intosachinchoolur:scss-usefrom
joeworkman-forks:master

Conversation

@joeworkman
Copy link
Contributor

This update migrates all sass to the new @use/@forward from the deprecated @import. It also uses the sass:list module for various functions. I have verified that this build generates the same exact CSS as v2.8.2.

I would consider this a breaking change. With some simple setups that do not override SCSS variables, existing setups might work. However, here is an example of my test setup that I needed to get this version working.

This first line is important so that the variables can be overwritten before you load in lightgallery and plugins.

@use 'lg-variables' as *;

$backdrop-opacity: 1;
$lg-toolbar-bg: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.4)
);
$lg-border-radius-base: 2px;
$lg-theme-highlight: rgb(169, 7, 7);
$lg-theme-color: #000;

// basic icon colours
$lg-icon-bg: rgba(0, 0, 0, 0.45);
$lg-icon-color: #999;
$lg-icon-hover-color: #fff;

// counter
$lg-counter-color: #e6e6e6;
$lg-counter-font-size: 16px;

// Next prev icons
$lg-next-prev-bg: $lg-icon-bg;
$lg-next-prev-color: $lg-icon-color;
$lg-next-prev-hover-color: $lg-icon-hover-color;

// toolbar icons
$lg-toolbar-icon-color: $lg-icon-color;
$lg-toolbar-icon-hover-color: $lg-icon-hover-color;
$lg-toolbar-icon-disabled-opacity: 0.75;

// autoplay progress bar
$lg-progress-bar-bg: #333;
$lg-progress-bar-active-bg: $lg-theme-highlight;
$lg-progress-bar-height: 5px;

// paths
$lg-path-fonts: 'gallery';
$lg-path-images: 'gallery';

// Zoom plugin
$zoom-transition-duration: 0.5s;

// Sub html - titile
$lg-sub-html-bg: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.6)
);
$lg-sub-html-color: #eee;

// thumbnail toggle button
$lg-thumb-toggle-bg: #0d0a0a;
$lg-thumb-toggle-color: $lg-icon-color;
$lg-thumb-bg: #0d0a0a;
$lg-thumb-container-height: 100px;

// Pager

// z-index
$zindex-outer: 1050;
$zindex-progressbar: 1083;
$zindex-controls: 1084;
$zindex-toolbar: 1082;
$zindex-subhtml: 1080;
$zindex-components: 1080;
$zindex-pager: 1080;
$zindex-playbutton: 1080;
$zindex-item: 1060;
$zindex-backdrop: 1040;

@use "lightgallery";

@use "lg-autoplay";
@use "lg-fullscreen";
// @use "lg-medium-zoom";
@use "lg-pager";
@use "lg-thumbnail";
@use "lg-transitions";
@use "lg-zoom";
// @use "lg-comments";
// @use "lg-relative-caption";
// @use "lg-rotate";
// @use "lg-share";
// @use "lg-video";

Fixes #1677
Fixes #1647

@CLAassistant
Copy link

CLAassistant commented Feb 18, 2025

CLA assistant check
All committers have signed the CLA.

@eat-sleep-code
Copy link

eat-sleep-code commented Apr 15, 2025

@sachinchoolur and @joeworkman when will this be merged?

@stale
Copy link

stale bot commented Jun 14, 2025

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the v1 label Jun 14, 2025
@joeworkman
Copy link
Contributor Author

@eat-sleep-code Not my decision. Sorry. You can pull down the version from this pull request though.

@stale stale bot removed the v1 label Jun 14, 2025
@sachinchoolur sachinchoolur changed the base branch from master to scss-use June 15, 2025 05:37
@sachinchoolur sachinchoolur merged commit a52c99c into sachinchoolur:scss-use Jun 15, 2025
1 check passed
@sachinchoolur
Copy link
Owner

Thanks @joeworkman, Changes are now available in version 2.9.0-beta.1

@eat-sleep-code
Copy link

This worked! At first I thought it didn't, but it was just NPM being a bit problematic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Using deprecated sass features SASS Warning About Future Changes

4 participants